<!--
 * @Author: g05047
 * @Date: 2021-07-28 14:58:09
 * @LastEditors: g05047
 * @LastEditTime: 2021-08-31 13:12:40
 * @Description: file content
-->
<template>
  <div class="function-container">
    <!-- <div class="goBack">
      <el-button
        type="primary"
        size="mini"
        @click="$router.push({ name: 'guidePageOne' })"
      >
        <i class="iconfont icon-fanhui"></i>
        返回主页
      </el-button>
    </div> -->

    <section class="function-box">
      <el-row>
        <div @click="handleClick(2, '食品生产企业')">
          <span class="iconfont icon-jichuxinxi"></span>
          <i> 食品生产企业</i>
        </div>
        <div @click="handleClick(3, '餐饮服务经营者')">
          <span class="iconfont icon-floor-building"></span>
          <i>餐饮服务经营者</i>
        </div>
        <div @click="handleClick(4, '集中用餐单位食堂')">
          <span class="iconfont icon-renwu"></span>
          <i>集中用餐单位食堂</i>
        </div>
        <div @click="handleClick(5, '食品销售经营者')">
          <span class="iconfont icon-chouyang"></span>
          <i>食品销售经营者</i>
        </div>
      </el-row>
      <el-row>
        <div @click="handleClick(6, '食品流通经营者')">
          <span class="iconfont icon-iconfontzhizuobiaozhun12"></span>
          <i>食品流通经营者</i>
        </div>
        <div @click="handleClick(7, '食品小作坊')">
          <span class="iconfont icon-jigou"></span>
          <i>食品小作坊</i>
        </div>
        <div @click="handleClick(8, '食品销售经营者')">
          <span class="iconfont icon-peizhihechajieguobaobiao"></span>
          <i>食品销售经营者特食</i>
        </div>
        <div style="background:#F4F3F4;cursor:unset"></div>
      </el-row>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleClick(modular, bodyIndustry) {
      console.log('modular: ', modular);
      let isSpecialFood = 0;
      if (modular > 7) {
        isSpecialFood = 1;
      } else {
        isSpecialFood = 0;
      }
      this.$router.push({
        path: '/settings/setUp',
        query: {
          bodyIndustry,
          isSpecialFood,
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.function-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f4f3f4;
  // .goBack {
  //   margin-top: 120px;
  //   padding-bottom: 20px;
  // }
  .function-box {
    width: 100%;
    .el-row {
      display: flex;
      justify-content: space-between;
      align-items: space-between;
      height: 200px;
    }
    .el-row > div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 180px;
      height: 140px;
      background-color: #2d94e3;
      margin-right: 10px;
      color: #ffffff;
      font-weight: 700;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.2s linear;
      .iconfont {
        font-size: 50px;
        font-weight: normal;
      }
      &:hover {
        transform: translate3d(2px, -5px, 2px);
      }
    }
  }
}
</style>
